// 边距
.pl-0{
    padding-left: 0px !important;
}

.pl-3{
    padding-left: 3px;
}

.pl-5{
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pt-0{
    padding-top: 0;
}

.pt-3{
    padding-top: 3px;
}

.pt-5{
    padding-top: 5px;
}

.pt-10{
    padding-top: 10px;
}

.pt-15{
    padding-top: 15px;
}

.pt-20{
    padding-top: 20px;
}

.pr-0{
    padding-right: 0;
}

.pr-3{
    padding-right: 3px;
}

.pr-5{
    padding-right: 5px;
}

.pr-10{
    padding-right: 10px;
}

.pr-15{
    padding-right: 15px;
}

.pr-20{
    padding-right: 20px;
}

.pr-60{
    padding-right: 60px;
}

.pb-0 {
    padding-bottom: 0px;
}

.pb-3 {
    padding-bottom: 3px;
}

.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}

.ml-0 {
    margin-left: 0px !important;
}

.ml-3 {
    margin-left: 3px;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20{
    margin-left: 20px;
}

.mt-0{
    margin-top: 0px;
}

.mt-3{
    margin-top: 3px;
}

.mt-5{
    margin-top: 5px;
}

.mt-10{
    margin-top: 10px;
}

.mt-15{
    margin-top: 15px;
}

.mt-20{
    margin-top: 20px;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-3 {
    margin-bottom: 3px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10{
    margin-bottom: 10px;
}

.mb-15{
    margin-bottom: 15px;
}

.mb-20{
    margin-bottom: 20px;
}

.mr-0{
    margin-right: 0;
}

.mr-3{
    margin-right: 3px;
}

.mr-5{
    margin-right: 5px;
}

.mr-10{
    margin-right: 10px;
}

.mr-15{
    margin-right: 15px;
}

.mr-20{
    margin-right: 20px;
}

// 显示分割线
.line-bottom-gray {
    border-bottom: 1px solid #ebebeb;
}

.line-bottom {
    border-bottom: 1px solid #000;
}

.line-left{
    border-left: 1px solid #000;
}

.line-right{
    border-right: 1px solid #000;
}

.line-top{
    border-top: 1px solid #000;
}

// 隐藏分割线
.line-bottom-none{
    border-bottom: 0px !important;
}

.line-top-none{
    border-top: 0;
}

.line-left-none{
    border-left: 0;
}

.line-right-none{
    border-right: 0;
}

.line-none{
    border: 0 !important;
}

// 文字格式
.text-center {
    text-align: center;
}

.text-right{
    text-align: right;
}

.text-left{
    text-align: left;
}

.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 文字缩进
.text-indent2{
    text-indent: -2em;
}

// 文字大小
.font-30{
    font-size: 30px;
}
.font-24{
    font-size: 24px;
}
.font-22{
    font-size: 22px;
}
.font-20{
    font-size: 20px;
}
.font-18{
    font-size: 18px;
}
.font-16{
    font-size: 16px;
}
.font-14{
    font-size: 14px;
}

// flex布局
.flex{
    display: flex;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.align-center {
    display: flex;
    align-items: center;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex1{
    flex:1;
}

//宽度
.width-120{
    width: 120px;
}
.width-180{
    width: 180px;
}
//背景色
.bg-black{
    background-color: #000;
}

.bg-white{
    background-color: #fff;
}

.bg-grey{
    background-color: #f6f6f6;
}

//文字颜色
.white{
    color: #fff !important;
}

.black{
    color:#000;
}

.red{
    color:red;
}

.relative{
    position: relative;
}

.absolute{
    position: absolute;
}

.height-200{
    height: 200px;
}